import React, { Component } from 'react'
import "./Index.scss"
import axios from "axios";
import {BASE_URL,GET_USER_INFO} from '../../utils/requestPath'
import { List, InputItem, WhiteSpace,Button,ImagePicker, Checkbox, Flex,Toast } from 'antd-mobile';
import Jsonp from 'jsonp'
import face from '../../assets/img/face.png'
import fiee from '../../assets/img/5555.gif'
import care1 from '../../assets/img/care1.gif'
import HomeStart from '../../assets/img/homestart.jpg'
import Logo from '../../assets/img/logo.jpg'
import StartBackground from '../../assets/img/startBackground.png'
import requestAxios from '../../utils/myaxios'
import Logos from '../../assets/img/logo.png'
//添加路由
import {withRouter} from "react-router-dom"
const CheckboxItem = Checkbox.CheckboxItem;
const AgreeItem = Checkbox.AgreeItem;
class Index extends Component {
  constructor(props){
    super(props);
    //李彪的引用
    this.goodListRef = React.createRef();
  }
  state = {
    header:[
      {
        id:0,
        name:"AcFun",
        title:"周边商城"
      }
    ],
    videoList:[],
    loginAdmin:"",
    videoaction:[],
    data_index:"",
    userTxt:"",
    phoneTxt:"",
    inputForm:false,
    startUp:false,
    registory:true,
    prize:false,
    indexStart:false,
    jhAddress:"",
    addressIp:"",
    citysList:"",
    addressIpUt:"",
    addressTxt:"",
    headerEsc:"<",
    footerZc:"<<隐私政策的>>",
    emailValue:"",
    passValue:"",
    checkedPass:false
  }
  
  //点击跳转到登录页面
  handleVideo = (e) => {
    this.props.history.push("/login")
  }

  //邮箱
  emailOnchange=(event)=>{
    console.log(event)
    this.setState({
      emailValue:event,
      checkedPass:false
    })
    localStorage.removeItem("userAccount")

  }

  //密码
  passOnchange=(event)=>{
    console.log(event)
    this.setState({
      passValue:event,
      checkedPass:false
    })
    localStorage.removeItem("userAccount")
  }
  
  // 数据加载发请求
   async componentDidMount(){
    document.title="登陆"
    const userInfo =await localStorage.getItem("userAccount")
    const userInfos =await JSON.parse(userInfo) || {};

    console.log(userInfos.checkbox)
    if(userInfos.emailValue){
      this.setState({
        emailValue:userInfos.emailValue,
        passValue:userInfos.passValue,
        checkedPass:true
      })
      console.log("数据进来了")
    }
    
  }

  handleClick = () => {
    //console.log("点击了")
    //alert("点击登陆")
    // debugger
    // //this.inputRef.focus();
    // console.log(this.state.userTxt)
    // console.log(this.state.phoneTxt)
    // axios.post(BASE_URL+"/api/user/add/userInfo",{
    //   userName:this.state.userTxt,
    //   telephone:this.state.phoneTxt
    // }).then(res=>{
    //   if(res.data){
    //     alert("数据添加成功")
    //     console.log(res.data)
    //   }else{
    //     alert("数据请求失败")
    //   }
    // })
    
  }

  //启动页配置
  indexStart = ()=>{
    return <div
    style={{fontSize:20,transition:'all'}}
    >
       <img 
          style={{width:"100%",height:"100%",marginTop:0}}
          src={HomeStart}/>
    </div>
  }

  //表单配置
  inputForm = ()=>{
    return <div>
      <List renderHeader={() => 'Customize to focus'}>
          <InputItem
            clear
            placeholder="用户名"
            value={this.state.userTxt}
            onChange={txt=>this.setState({userTxt:txt})}
          >用户名</InputItem>
          <InputItem
            clear
            placeholder="手机号"
            value={this.state.phoneTxt}
            onChange={txt=>this.setState({phoneTxt:txt})}
          >手机号</InputItem>

          <List.Item>
            <Button type="primary" onClick={this.handleClick}>登陆</Button>
          </List.Item>
        </List>
    </div>
  }

  onChange = (val) => {
    console.log(val);
  }


  escOnClick=()=>{
    this.props.history.goBack()
  }

  loginOnClick=()=>{
    Toast.loading('Loading...', 2, () => {
      console.log('Load complete !!!');
    });
    setTimeout(()=>{
      const {emailValue,passValue} = this.state;
      let userName = emailValue;
      let passWord = passValue;
      console.log(userName+passWord)
      if(emailValue.length <=1 && passValue.length <= 1){
        Toast.info('账号密码不能为空', 2, null, false);
        return;
      }
      const loginUserInfo = {userName,passWord};
      requestAxios.post(BASE_URL+"/api/user/login",loginUserInfo).then(res=>{
        
          console.log('请求成功')
          if(!res.data.flag){
            Toast.info('账号或密码有误', 2, null, false);
            return;
          }else{
            localStorage.setItem("userInfoIns",JSON.stringify(res.data.zgUser))
            localStorage.setItem("token",JSON.stringify(res.data.token))
            this.props.history.push("/navigator")
          }

      })
    },2000)
  }

  passCheckOnChange = ()=>{
    console.log("11111")

    const {checkedPass} = this.state;
    const {emailValue,passValue} = this.state
    if(!checkedPass){
      this.setState({
        checkedPass:true
      })
      const checkbox = false;
      const userEmailPass = {emailValue,passValue,checkbox};
      //如果是true, accoutn pass set localStorage
      localStorage.setItem("userAccount",JSON.stringify(userEmailPass))
    }else{
      this.setState({
        checkedPass:false
      })
      //如果是false, delete pass set localStorage
      localStorage.removeItem("userAccount")
    }
    console.log(checkedPass)

    console.log(this.state.checkedPass)

  }
  registoryClick = ()=>{
    this.props.history.push("/register")
  }

  //注册页
  registory = ()=>{
    const {headerEsc,footerZc} = this.state
  
    return (
      <div className="main-app-login">
          {/* 顶部返回键 */}
          <header className="main-header">
              {/* 返回箭头 */}
              <section className="main-header-esc" onClick={this.escOnClick}>{headerEsc}</section>
              {/* 欢迎 */}
              <seciton className="main-header-hello">こんにちは、</seciton>
              {/* 欢迎来到....EZblu */}
              <div className="main-header-ezblu">
                  <section className="main-header-hello-font">EZBLUへようこそ</section>
                  <img className="main-header-hello-img" src={Logos}></img>
              </div>
          </header>

          {/* 中部 from表单页 */}
          <main className="app-main">
              {/* <input className="app-main-phone" type="text" placeholder="输入手机号\邮箱">

              </input> */}
             <div className="app-main-email-start">
              <h4>ユーザID</h4>
                <InputItem
                    type="email"
                    placeholder="ユーザID"
                    //error={this.state.hasError}
                    //onErrorClick={this.onErrorClick}
                    onChange={this.emailOnchange}
                    value={this.state.emailValue}
                    //style={{widht:400}}
                ></InputItem>
             </div>
             
            <div className="app-main-pass-start">
              <h4>パスワード</h4>
              <InputItem
                    type="password"
                    placeholder="パスワード"
                    //error={this.state.hasError}
                    //onErrorClick={this.onErrorClick}
                    onChange={this.passOnchange}
                    value={this.state.passValue}
                ></InputItem>
            </div>
              {/* <input className="app-main-pass" type="password" placeholder="密码">
              </input> */}
          </main>

        {/* 记住密码 */}
        <div className="app-pass">
            <Flex>
            <Flex.Item>
              <AgreeItem 
              checked={this.state.checkedPass}
              style={{fontWeight:'bold'}} data-seed="logId" onChange={this.passCheckOnChange}>
              <a onClick={(e) => { e.preventDefault()}} style={{fontWeight:'bold'}}>もう一度パスワードを入力してください</a>
              </AgreeItem>
            </Flex.Item>
          </Flex>
          <a onClick={this.registoryClick} style={{marginRight:60,color:"blue"}}>新規アカウントを作成する</a>
        </div>

        {/* 登陆按钮 */}
        <div className="app-login">
          <div className="app-login-botton">
            <Button className="app-login-botton-con" 
            type="primary" style={{backgroundColor:"rgb(107, 192, 223)",
            fontWeight:"800",border:"none"}}
            onClick={this.loginOnClick}
            >登録</Button></div>
        </div>
      </div>
    )
  }

  register=()=>{
    //点击后跳转注册
    setTimeout(()=>{
      this.props.history.push("/inputForm");
    },500)
  }

  //活动页
  prize = ()=>{
    return <div>活动页</div>
  }

  render() {
    return (
      <div style={{widht:"100%",height:"100%"}}>
         {this.state.indexStart?this.indexStart():""}
          {this.state.registory?this.registory():""}
      </div>
    )
  }
}

export default withRouter(Index)
